<template>
  <!--<div class="myorder">
   </div>-->
  <div>
    <!--<Header></Header>-->
    <!-- <div class='cusService' @click='servies'>
      <img src="../../assets/img/service.png" alt="" style="widht:100%;height:100%">
    </div> -->
    <div style="width: 1200px;margin: 30px auto;">
      <el-card style="width:100%;height:80vh;">
        <div slot="header" class="clearfix">
          <span>客服聊天</span>
        </div>


        <div class="customerMessage flex flex-h" >
          <ul class="customerList"  style="overflow: auto" >
            <li class="nameList flex" v-for="(item, index) in customerList" :key="index" @click="checkMessage(item, index)">
              <span>{{ item.realName }}</span>
              <!-- <i :class="['dot',{'active':item.status=='1'}]"></i> -->
            </li>
          </ul>
          <div class="tableBox">
            <el-table :data="tableData" stripe style="width: 100%">
              <!-- <el-table-column label="客户id" align="center">
	              <template slot-scope="scope">
	                <div v-if="scope.row.status==0">{{scope.row.fromId}}</div>
	                <div v-else></div>
	              </template>
	            </el-table-column>
	            <el-table-column label="客户名称" align="center">
	              <template slot-scope="scope">
	                <div v-if="scope.row.status==0">{{scope.row.userName}}</div>
	                <div v-else></div>
	              </template>
	            </el-table-column> -->
              <el-table-column prop="content" label="信息" align="center"></el-table-column>
              <el-table-column label="留言时间" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="人员" width="100" align="center">
                <template slot-scope="scope">
                  <div v-if="scope.row.status == '1'">客服</div>
                  <div v-else>用户</div>
                </template>
              </el-table-column>
            </el-table>
            <div style="width:100%;text-align:center;margin-top:20px">
              <el-button type="primary" @click="dialogFormVisible = true">回复</el-button>
            </div>

            <el-pagination :total="total" background style="margin:20px 0; text-align:center;" :page-size="pageSize" :current-page.sync="currentPage" layout=" prev, pager, next,total,jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
          </div>
        </div>


        <el-dialog title="联系客服" :visible.sync="dialogFormVisible" style="margin-top: 22vh;">
          <el-form :model="form">
            <el-form-item label="输入回复文字" :label-width="formLabelWidth">
              <el-input v-model="form.message" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addMessage">确 定</el-button>
          </div>
        </el-dialog>



      </el-card>
    </div>
    <!--<Footer></Footer>-->
  </div>
</template>

<script>
//import Header from '../orders/header'
//import Footer from '../../components/footer'
import { KEFULIST, KEFUMESSAGELIST, KEFUADD } from '@/utils/api'
export default {
//components: {
//  Footer,
//  Header
//},
  data() {
    return {
      formLabelWidth: '120px',
      toId: 2,
      dialogFormVisible: false,
      form: {
        message: ''
      },
      userRecord: {},
      customerList: [],
      tableData: [],
      // 分页
      total: 0,
      currentPage: 1,
      pageSize: 8
    }
  },
  mounted() {
    this.CusServicelist()
  },
  methods: {
    servies() {
      this.$router.push({ path: '/support/community' })
    },
    // 获取当前时间函数
    timeFormate(timeStamp) {
      var date = new Date(timeStamp * 1000)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var h = date.getHours()
      h = h < 10 ? '0' + h : h
      var minute = date.getMinutes()
      var second = date.getSeconds()
      minute = minute < 10 ? '0' + minute : minute
      second = second < 10 ? '0' + second : second
      return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
    },
    addMessage() {
      KEFUADD({
        content: this.form.message,
        toId: this.toId
      }).then(res => {
        this.$message.success('回复成功')
        this.dialogFormVisible = false
        this.form.message = ''
        this.initData()
      })
    },
    //  获取列表及信息
    initData() {
      KEFUMESSAGELIST({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        toId: this.toId,
        fromId: 0
      }).then(res => {
        this.total = res.data.count
        this.tableData = res.data.dataList
        for (let i in this.tableData) {
          this.tableData[i].createTime = this.timeFormate(this.tableData[i].createTime)
        }
      })
    },
    //  获取客服列表及信息
    CusServicelist() {
      KEFULIST({}).then(res => {
        this.customerList = res.data
        console.log(this.customerList, '000000')
      })
    },
    checkMessage(item, index) {
      this.toId = item.id
      this.initData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      KEFUMESSAGELIST({
        pageNo: val,
        pageSize: this.pageSize,
        toId: this.toId,
        fromId:0
      }).then(res => {
        this.total = res.data.count
        this.tableData = res.data.dataList
        for (let i in this.tableData) {
          this.tableData[i].createTime = this.timeFormate(this.tableData[i].createTime)
        }
      })
    },
    handleCurrentChange(val) {
      this.currentPage = val
      KEFUMESSAGELIST({
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        toId: this.toId,
        fromId: 0
      }).then(res => {
        this.total = res.data.count
        this.tableData = res.data.dataList
        for (let i in this.tableData) {
          this.tableData[i].createTime = this.timeFormate(this.tableData[i].createTime)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.customerMessage {
  /*height: calc(100vh - 125px);*/
  height: 65vh;
  padding: 10px;
  background: #fff;
  .customerList {
    width: 200px;
    height: 100%;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
    .nameList {
      width: 100%;
      //   height: 100%;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #f1f1f1;
      }
      .dot {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
      }
      .active {
        background: rgb(7, 131, 241);
      }
    }
  }
  .tableBox {
    flex: 1;
    height: 100%;
    background: #fff;
    padding: 10px 2px;
    margin-left: 15px;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
  }
}
</style>
<style>
.v-modal {

  z-index: 1999 !important;
}
</style>
